<template>
    <tool-header>
        {{ title }}
    </tool-header>
    <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="Encrypt Type">
            <a-segmented v-model:value="modelRef.encryptType" :options="data" />
        </a-form-item>
        <a-form-item label="Passphrase" name="passphrase">
            <a-input-password v-model:value="modelRef.passphrase" placeholder="input passphrase" />
        </a-form-item>
        <!-- <a-form-item label="Mode" name="mode">
            <a-select v-model:value="modelRef.mode" style="width: 200px" :options="modeOptions"></a-select>
        </a-form-item>
        <a-form-item label="Padding" name="padding">
            <a-select v-model:value="modelRef.padding" style="width: 200px" :options="paddingOptions"></a-select>
        </a-form-item> -->
        <!-- <a-form-item label="Key Size" name="keySize">
            <a-select v-model:value="modelRef.keySize" style="width: 200px" :options="keySizeOptions"></a-select>
        </a-form-item> -->
        <a-form-item label="Input" v-bind="validateInfos.base64Input">
            <a-textarea v-model:value="modelRef.base64Input" :rows="4" />
        </a-form-item>
        <a-form-item label="Output">
            <a-textarea v-model:value="base64Output" :rows="4" />
        </a-form-item>
    </a-form>
</template>
<script lang="ts" setup>
import { reactive, ref, computed } from 'vue';
import { Form } from 'ant-design-vue';
import { useRoute } from 'vue-router'
import ToolHeader from '../ToolHeader.vue'
import CryptoES from 'crypto-es';
const useForm = Form.useForm;
const route = useRoute();
const title = route.query.title


const labelCol = { span: 4 };
const wrapperCol = { span: 14 };
const data = reactive(['Encrypt', 'Decrypt']);
const modelRef = reactive({
    base64Input: 'Hello World',
    encryptType: data[0],
    passphrase: '123456'
});



const base64Output = computed(() => {
    if (modelRef.encryptType == "Encrypt") {
        const encrypted = CryptoES.TripleDES.encrypt(modelRef.base64Input, modelRef.passphrase);
        return encrypted.toString();
    } else {
        const decrypted = CryptoES.TripleDES.decrypt(modelRef.base64Input, modelRef.passphrase);
        return decrypted.toString(CryptoES.enc.Utf8)
    }
})
const { resetFields, validate, validateInfos } = useForm(
    modelRef,
    reactive({
        base64Input: [
            {
                required: true,
                message: 'Please input Base64 encoding',
            },
        ]
    }),
);
</script>